<template>
    <div :class="cns" @click="toggle" :disabled="cdisabled">
        <ph-icon ph-mr :icon="checked?'check-square':'square-o'"/>
        <span><slot></slot></span>
    </div>
</template>
<script lang="ts">
import { computed, defineComponent, inject, Ref } from 'vue'
import {PhIcon} from '../../base'
export default defineComponent({
    components:{PhIcon},
    props:{
        disabled:{type:Boolean,default:false},
        value:{
            type:[String,Number]
        }
    },
    setup(props) {
        const cvalue = inject("phcvalue") as Ref<Array<string|number>>
        const update = inject("update") as (obj:Record<string,unknown>)=>void
        const disabled = inject<Ref<boolean>>("disabled")
        const cdisabled = computed(()=>props.disabled||disabled&&disabled.value)
        const checked = computed(()=>{
            return cvalue.value.includes(props.value as string)
        })
        const cns = computed(()=>{
            return {
                'ph-check-item':true,
                'ph-active':checked.value,
            }
        })
        const toggle = ()=>{
            if(cdisabled.value)return
            update({
                value:props.value,
                checked:!checked.value
            })
        }
        return {cns,checked,toggle,cdisabled}
    },
})
</script>